<template>
  <view class="order">
    <!-- <nut-watermark :z-index="999" content="小刘"></nut-watermark> -->
    <view class="searchbox">
      <nut-searchbar v-model="searchContent.o_order_code" :clearable="false"	 placeholder="请输入订单号">
        <template #rightout> <Search @tap="searchListBtn"/> </template>
      </nut-searchbar>
    </view>
    <view class="scrollView" v-if="orderListData.length">
      <scroll-view 
        style="height: 100%;"
        :refresherEnabled="true"
        :scroll-y="true"
        :lowerThreshold="100"
        :refresherTriggered="isFresh"
        @refresherRefresh="refresherRefresh"
        @scrolltolower="loadMore"
      >
      <view class="orderItem" v-for="item in orderListData" :key="item.o_order_code" @tap="gotoPage(item.o_order_code)">
        <view class="item_title">
          订单编号：{{ item.o_order_code }}
        </view>
        <view class="item_content">
          <view class="content_item">眼镜数量： {{ item.o_glasses_num }}</view>
          <view class="content_item">押金： {{ item.o_real_money }}</view>
          <view class="content_item">订单状态: 
            <nut-tag type="primary" v-if="item.o_status == -1">  已取消 </nut-tag>
            <nut-tag type="warning" v-else-if="item.o_status == 0">  待支付 </nut-tag>
            <nut-tag type="success" v-else-if="item.o_status == 1">  已支付 </nut-tag>
            <nut-tag type="success" v-else>  已取镜 </nut-tag>
          </view>
           
          <view class="content_item">
            支付状态：
            <nut-tag type="success" v-if='item.pay_status == 1'> 已支付 </nut-tag>
            <nut-tag type="warning" v-else> 未支付 </nut-tag></view>
        </view>
        <view class="item_content_bottom">
          <view class="content_item">下单时间： {{ item.create_time }}</view>
          <view class="content_item" v-if="item.o_pay_time">支付时间： {{ item.o_pay_time }}</view>
        </view>
      </view>
      </scroll-view>
    </view>
    <view v-else>
      <nut-empty description="暂无数据"></nut-empty>
    </view>
  </view>
</template>

<script setup>
import { Search } from '@nutui/icons-vue-taro'
import './index.scss';
import { reactive, ref } from 'vue';
import { orderList } from '../../https/api';
import Taro from '@tarojs/taro';

const total = ref(0)
const orderListData = ref([])
const searchContent = reactive({
  o_order_code: null,
  page: 1,
  page_size: 5
})

const isFresh = ref(false)
//  下拉刷新
const refresherRefresh = () => {
  isFresh.value = true;
  searchContent.page = 1
  searchList()
}
//  加载更多
const loadMore = () => {
  if (total.value <= orderListData.value.length) {
    return
  } else {
    searchContent.page += 1;
    searchList()
  }
}

const searchListBtn = () => {
  // searchContent.page = 1
  // orderList({...searchContent}).then(res => {
  //   if (res.code == '1000') {
  //     orderListData.value = [...res.data.data_list]
  //     total.value = res.data.total
  //     isFresh.value = false;
  //   }
  // })
}
const gotoPage = (code) => {
  Taro.navigateTo({
    url: `/pages/orderDetail/index?orderCode=${code}`,
  })
}
//  搜索
const searchList = () => {
  orderList({...searchContent}).then(res => {
    if (res.code == '1000') {
      orderListData.value = [ ...orderListData.value, ...res.data.data_list]
      total.value = res.data.total;
      isFresh.value = false;
    }
  })
}
</script>

<style>
</style>